<template>
    <div class="system-dept-container">
        <!-- 查询条件-->
        <el-card shadow="hover">
            <el-form
                    inline
                    v-model="params"
                    size="small"
            >
                <#list vofields as field>
                    <el-form-item>
                        <el-input v-model="params.${field.fieldName!''}" placeholder="搜索${field.fieldComment}"></el-input>
                    </el-form-item>
                </#list>
                <el-form-item>
                    <el-button type="primary" class="ml10" @click="initTableData">
                        <el-icon>
                            <elementSearch/>
                        </el-icon>
                        查询
                    </el-button>
                </el-form-item>
            </el-form>
        </el-card>
        <!--分割线-->
        <el-divider></el-divider>
        <!--数据展示和分页-->
        <el-card shadow="never">
            <template #header>
                <div class="card-header">
                    <span>${tableComment}列表</span>
                    <!--新增等操作区域-->
                    <el-button size="small" type="success" class="ml10" @click="openAddWindow">
                        <el-icon>
                            <elementDocumentAdd/>
                        </el-icon>
                        新增${tableComment}
                    </el-button>
                </div>
            </template>
            <!--表格展示区-->
            <el-table
                    :data="tableData.data"
                    style="width: 100%"
                    default-expand-all
            >
                <#list vofields as field>
                    <el-table-column align="center" label="${field.fieldComment}" prop="${field.fieldName!''}"
                                     show-overflow-tooltip/>
                </#list>
                <el-table-column align="center" label="操作" show-overflow-tooltip width="230">
                    <template #default="scope">
                        <el-button type="text" @click="openEditWindow(scope.row)">修改</el-button>
                        <el-popconfirm
                                confirm-button-text="删除"
                                cancel-button-text="取消"
                                icon-color="red"
                                title="确定删除这条记录吗？"
                                @confirm="delRow(scope.row)"
                        >
                            <template #reference>
                                <el-button type="text">删除</el-button>
                            </template>
                        </el-popconfirm>
                    </template>
                </el-table-column>
            </el-table>
            <!--分页-->
            <el-pagination
                    @size-change="onHandleSizeChange"
                    @current-change="onHandleCurrentChange"
                    class="mt15"
                    :pager-count="5"
                    :page-sizes="[10, 20, 30]"
                    v-model:current-page="params.pageNum"
                    background
                    v-model:page-size="params.pageSize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="tableData.total"
            >
            </el-pagination>
        </el-card>

        <Add${tableName} ref="addRef" @initTableData="initTableData"/>
        <Edit${tableName} ref="editRef" @initTableData="initTableData"/>
    </div>
</template>

<script lang="ts">
    import {onMounted, reactive, ref, toRefs} from 'vue';
    import Add${tableName} from '/@/views/';
    import Edit${tableName} from '/@/views/';
    import {del${tableName}} from "/@/api/";

    export default {
        name: '${tableName1}',
        components: {
            Add${tableName},
            Edit${tableName}
        },
        setup(props) {
            const addRef = ref();
            const editRef = ref();

            const state = reactive({
                tableData: {
                    data: [],
                    total: 0,
                    loading: false,
                }, params: {
                    pageNum: 1,
                    pageSize: 10,
                    <#list vofields as field>
                    ${field.fieldName}: '',
                    </#list>
                },
            });
            // 初始化表格数据
            const initTableData = () => {
                get${tableName}List(state.params).then(res => {
                    state.tableData.data = res.data
                    state.tableData.total = res.extra.total
                })
            };

            //分页大小改变
            const onHandleSizeChange = (val: number) => {
                state.params.pageSize = val;
                initTableData();
            }
            // 分页改变
            const onHandleCurrentChange = (val: number) => {
                state.params.pageNum = val;
                initTableData();
            };

            // 打开新增菜单弹窗
            const openAddWindow = () => {
                addRef.value.openWindows();
            }

            const openEditWindow = (row: any) => {
                editRef.value.openWindows(row.${pkField});
            }

            const delRow = (row: any) => {
                del${tableName}(row.${pkField}).then(() => {
                    initTableData()
                })
            }

            // 页面加载时
            onMounted(() => {
                initTableData();
            });

            return {
                addRef,
                editRef,
                initTableData,
                onHandleSizeChange,
                onHandleCurrentChange,
                openAddWindow,
                openEditWindow,
                delRow,
                ...toRefs(state),
            };
        },
    };
</script>

<style scoped>
</style>
